<template>
  <div class="building-container">
    <el-row type="flex" justify="start">
      <span class="label">楼宇名称:</span>
      <el-input v-model="pageParams.name" placeholder="请输入楼宇名称" class="input" size="small" @keyup.enter.native="onSearch" />
      <el-button type="primary" size="small" @click="onSearch">查询</el-button>
    </el-row>
    <el-divider />
    <el-button type="primary" size="small" style="margin-bottom:20px" @click="visible=true">添加楼宇</el-button>
    <el-table
      v-loading="loading"
      :data="list"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#f4f6f8'}"
    >
      <el-table-column
        label="序号"
        width="140px"
        type="index"
        :index="index"
      />
      <el-table-column
        prop="name"
        label="楼宇名称"
        width="width"
      />
      <el-table-column
        prop="floors"
        label="层数"
        width="width"
      />
      <el-table-column
        prop="area"
        label="在管面积(m²)"
        width="width"
      />
      <el-table-column
        prop="propertyFeePrice"
        label="物业费(元/m²)"
        width="width"
      />
      <el-table-column
        label="状态"
        width="width"
      >
        <template #default="{row}">
          {{ row.status===0?'空置中':'租赁中' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="prop"
        label="操作"
        width="width"
      >
        <template #default="{row}">
          <el-button type="text" :disabled="!!row.demoFlag" @click="onEdit(row.id)">编辑</el-button>
          <el-button type="text" :disabled="!!row.demoFlag" @click="onDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <my-pagination
      :total="total"
      @change="(val)=>{
        pageParams=Object.assign(pageParams,val)
        getList()
      }"
    />

    <el-dialog
      :title="buildingInfo.id?'编辑楼宇':'添加楼宇'"
      :visible.sync="visible"
      width="width"
    >
      <el-form ref="form" :model="buildingInfo" :rules="rules">
        <el-form-item label="楼宇名称" prop="name">
          <el-input v-model="buildingInfo.name" placeholder="请输入楼宇名称" />
        </el-form-item>
        <el-form-item label="层数" prop="floors">
          <el-input v-model.number="buildingInfo.floors" placeholder="请输入楼宇层数" type="number" />
        </el-form-item>
        <el-form-item label="在管面积" prop="area">
          <el-input v-model="buildingInfo.area" placeholder="请输入在管面积" @blur="formatNumber('area')">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item label="物业费单价" prop="propertyFeePrice">
          <el-input v-model="buildingInfo.propertyFeePrice" placeholder="请输入物业费" @blur="formatNumber('propertyFeePrice')">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="addBuilding">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListAPI, addBuildingAPI, getBuildDetailAPI, updateBuildAPI, delBuildAPI } from '@/api/building'
import { onSecondConfirm } from '@/utils'
import MyPagination from '@/components/my-pagination'
export default {
  components: {
    MyPagination
  },
  data() {
    return {
      visible: false,
      loading: false,
      total: 0,
      list: [],
      pageParams: {
        name: '',
        page: '1',
        pageSize: '10'
      },
      buildingInfo: {
        name: '',
        floors: null,
        area: null,
        propertyFeePrice: null
      },
      rules: {
        name: [{ required: true, message: ' ', trigger: 'blur' }],
        floors: [{ required: true, message: ' ', trigger: 'blur' }],
        area: [{ required: true, message: ' ', trigger: 'blur' }],
        propertyFeePrice: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  computed: {
    index() {
      return this.pageParams.page > 1 ? (this.pageParams.page - 1) * this.pageParams.pageSize + 1 : 1
    }
  },
  watch: {
    visible(val) {
      if (val === false) {
        this.$refs.form.resetFields()
        this.buildingInfo = {
          name: '',
          floors: null,
          area: null,
          propertyFeePrice: null
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async onDel(id) {
      onSecondConfirm({
        content: '是否确认删除当前楼宇?',
        handler: async() => {
          await delBuildAPI(id)
          this.$message.success('删除成功!')
          this.getList()
        } })
    },
    async onSearch() {
      await this.getList()
    },
    async onEdit(id) {
      this.buildingInfo.id = id
      // 获取详情
      const { name, floors, area, propertyFeePrice } = await getBuildDetailAPI(id)
      // 回填数据
      this.buildingInfo.name = name
      this.buildingInfo.floors = floors
      this.buildingInfo.area = area
      this.buildingInfo.propertyFeePrice = propertyFeePrice
      // 弹出表单
      this.visible = true
    },
    formatNumber(item) {
      // 使用正则表达式保留两位小数
      if (!/^[-+]?[0-9]*\.?[0-9]+$/.test(this.buildingInfo[item])) {
        this.buildingInfo[item] = null
      } else {
        this.buildingInfo[item] = parseFloat(this.buildingInfo[item]).toFixed(2)
      }
    },
    addBuilding() {
      this.$refs.form.validate(async isOk => {
        if (isOk) {
          if (this.buildingInfo.id) {
            await updateBuildAPI(this.buildingInfo)
            this.$message.success('修改成功!')
          } else {
            await addBuildingAPI(this.buildingInfo)
            this.$message.success('添加成功!')
          }
          this.visible = false
          this.getList()
        }
      })
    },
    async getList() {
      this.loading = true
      const res = await getListAPI(this.pageParams)
      this.list = res.rows
      this.total = res.total
      this.loading = false
    },
    onSizeChange(val) {
      this.pageParams.pageSize = val
      this.getList()
    },
    onCurrentChange(val) {
      this.pageParams.page = val
      this.getList()
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  padding-right: 0px;
}
.label{
  padding-right:10px;
  line-height:32px;
  font-size:14px
}
.input{
  width: 250px !important;
  margin-right: 10px;
}
</style>
